---
title: React Component Testing
description: Learn how to set up component tests in React and use Cypress with different React frameworks and bundlers.
sidebar_position: 10
sidebar_label: Overview
---

<ProductHeading product="app" />

# React Component Testing

:::info

##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn

- How to set up component tests in React
- How to use Cypress with different React frameworks and bundlers

:::

## Framework Support

Cypress Component Testing currently supports React 18 and 19 with the following
frameworks:

- [React with Vite](#React-with-Vite)
- [React with Webpack](#React-with-Webpack)
- [Next.js](#Nextjs)

## Tutorial

Visit the
[Getting Started Guide](/app/component-testing/get-started) for a
step-by-step tutorial on adding component testing to any project and how to write your first tests.

## Installation

To get up and running with Cypress Component Testing in React, install Cypress
into your project:

<CypressInstallCommands />

Open Cypress:

<CypressOpenCommands />

<DocsImage
  src="/img/app/component-testing/select-test-type.jpg"
  caption="Choose Component Testing"
/>

The Cypress Launchpad will guide you through configuring your project.

:::info

For a step-by-step guide on how to create a component test, refer to the
[Getting Started](/app/component-testing/get-started) guide.

For usage and examples, visit the
[React Examples](/app/component-testing/react/examples) guide.

:::

## Framework Configuration

Cypress Component Testing works out of the box with [Vite](https://vitejs.dev/), [Next.js](https://nextjs.org/), and a custom
[Webpack](https://webpack.js.org/) config. Cypress will automatically detect one
of these frameworks during setup and configure them properly. The examples below
are for reference purposes.

### React with Vite

Cypress Component Testing works with React apps that use Vite 5+ as the bundler.

#### Vite Configuration

:::cypress-config-example

```ts
import customViteConfig from './customConfig'
```

```ts
{
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
      // optionally pass in vite config
      viteConfig: customViteConfig,
      // or a function - the result is merged with
      // any `vite.config` file that is detected
      viteConfig: async () => {
        // ... do things ...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
}
```

:::

#### Sample React Vite Apps

- [React Vite with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-vite-ts)

### React with Webpack

Cypress Component Testing works with React apps that use Webpack 4+ as the
bundler.

#### Webpack Configuration

:::cypress-config-example

```ts
import webpackConfig from './webpack.config'
```

```ts
{
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      // optionally pass in webpack config
      webpackConfig,
      // or a function - the result is merged with any
      // webpack.config that is found
      webpackConfig: async () => {
        // ... do things ...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
}
```

:::

If you don't provide a webpack config, Cypress will try to infer it. If Cypress
cannot do so, or you want to make modifications to your config, you can specify
it via the `webpackConfig` option.

#### Sample React Webpack Apps

- [React Webpack 5 with JavaScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-webpack5-js)

### Next.js

Cypress Component Testing works with Next.js 14, 15 and 16.

#### Next.js Configuration

:::cypress-config-example

```ts
{
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
}
```

:::

#### Next.js Caveats

There are some specific caveats to consider when testing Next.js
[Pages](https://nextjs.org/docs/basic-features/pages) in component testing.

A page component could have additional logic in its `getServerSideProps` or
`getStaticProps` methods. These methods only run on the server, so they are not
available to run inside a component test. Trying to test a page in a component
test would result in the props being passed into the page to be undefined.

While you could pass in props directly to the page component in a component
test, that would leave these server-side methods untested. However, an
end-to-end test would execute and test a page entirely.

Because of this, we recommend using E2E Testing over Component Testing for
Next.js pages and Component Testing for individual components in a Next.js app.

#### Sample Next.js Apps

- [Next.js 15 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next15-ts)
- [Next.js 16 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next16-ts)

## Community Resources

- [Cypress Component Test Driven Design](https://muratkerem.gitbook.io/cctdd/)
- [Cypress React Component Test Examples](https://github.com/muratkeremozcan/cypress-react-component-test-examples)
